<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <!-- 事件修饰符，提供了更加便捷的开发手段 -->
    <div class="msg">
        <div v-text='num'></div>
        <!-- 阻止冒泡 -->
        <!-- 方法一  阻止事件冒泡-->
        <div v-on:click='sum1'>
            <button v-on:click.stop='fn1'>冒泡1</button>
        </div>
        <!-- 方法二  只有点击此事件所在元素，事件才会触发-->
        <div v-on:click.self='sum1'>
            <button v-on:click='fn1'>冒泡2</button>
        </div>
        <!-- 阻止浏览器的默认事件 -->
        <a href="https://www.baidu.com" v-on:click.prevent='fn2'>百度</a>
    </div>
    <script>
        new Vue({
            el: '.msg',
            data: {
                msg1: 'hello Vue!',
                msg2: '<h1> nihao </h1>',
                num: 1
            },
            methods: {
                sum1: function(event) {
                    console.log(event.target.innerHTML)
                    this.num++
                },
                sum2: function(e1, e2, event) {
                    console.log(event.target.innerHTML)
                    this.num++
                },
                fn1: function() {

                },
                fn2: function(event) {

                }
            }
        })
    </script>
</body>

</html>